<template>
  <!--横屏里面倒计时组件里面开播提醒组件-->
  <div :class="[liveRemindBoxBgColor]" @click="clickLiveRemind">
    {{liveRemindText}}
  </div>
</template>

<script>
  export default {
    props: {
      liveRemind: String, //开播提醒状态
      authorizePass: {
        type: Boolean,
        default: true
      }, //非公开视频是否满足三要素
    },
    data() {
      return {
        liveRemindBoxBgColor: '',
        liveRemindText: '', //文字提示
        roomId: this.$route.params.roomid
      }
    },
    created() {
      //console.log(this.roomId)
      if (this.liveRemind == '0') { //开播提醒
        this.liveRemindText = this.$channel == 'gszq' ? '立即预约' : '开播提醒'
        this.liveRemindBoxBgColor = this.$channel == 'gszq' ? 'live-remind-box-blue' : 'live-remind-box-red'
      } else if (this.liveRemind == '1') {
        this.liveRemindText = this.$channel == 'gszq' ? '取消预约' : '取消提醒'
        this.liveRemindBoxBgColor = 'live-remind-box-gray';
      }
    },
    methods: {
      clickLiveRemind() {
        if (this.$store.state.isYk) {
          let jointUrl = fun.getCurPageUrl('live', this.$route.params.roomid)
          fun.ykDisposeFun(jointUrl);
        } else {
          if (this.liveRemindText == '开播提醒' || this.liveRemindText == '立即预约') {
            this.postRemindData('1')
          } else if (this.liveRemindText == '取消提醒' || this.liveRemindText == '取消预约') {
            this.postRemindData('0')
          }
        }
      },
      postRemindData(typeStatus) { //开播提醒请求
        let params = {
          'roomId': this.roomId,
          'isRemind': typeStatus
        }
        this.$http.post("/h5live/setZbRemind", this.$qs.stringify(params)).then(
          res => {
            let {
              code
            } = res.data
            if (code == "000000") {
              if (typeStatus == '1') {
                this.$emit('formChildMsg', {
                  type: 'liveRemind',
                })
                this.liveRemindText = this.$channel == 'gszq' ? '取消预约' : '取消提醒'
                this.liveRemindBoxBgColor = 'live-remind-box-gray';
              } else if (typeStatus == '0') {
                fun.toastMessage("取消提醒成功", 2000)
                this.liveRemindText = this.$channel == 'gszq' ? '立即预约' : '开播提醒';
                this.liveRemindBoxBgColor = this.$channel == 'gszq' ? 'live-remind-box-blue' : 'live-remind-box-red';
              }
            } else {
              if (this.$channel == 'gszq') {
                fun.toastMessage("预约失败，请稍后再试", 2000)
              }
              console.log('未知错误')
            }
          },
          err => {
            console.log(err);
          }
        );
      },
    }
  }
</script>

<style scoped="scoped">
  .live-remind-box-red {
    width: 160px;
    /*height: 85px;*/
    line-height: 85px;
    text-align: center;
    flex: 1;
    width: 110px;
    font-size: 28px;
    font-weight: 500;
    color: #FFFFFF;
    background: #E12D36;
    border-radius: 2px 0px 0px 2px;
  }

  .live-remind-box-blue {
    width: 160px;
    /*height: 85px;*/
    line-height: 85px;
    text-align: center;
    flex: 1;
    width: 110px;
    font-size: 28px;
    font-weight: 500;
    color: #FFFFFF;
    background: #006EFF;
    border-radius: 2px 0px 0px 2px;
  }

  .live-remind-box-gray {
    width: 160px;
    /*height: 85px;*/
    line-height: 85px;
    text-align: center;
    flex: 1;
    width: 110px;
    font-size: 28px;
    font-weight: 500;
    color: #FFFFFF;
    background: #969a9d;
    border-radius: 2px 0px 0px 2px;
  }
</style>
